<template>
  <div id="booklist">
    <!-- 已借图书 -->
    <div v-if="sort=='had_to_borrow_book'">
      <scroller style="top:0px" lock-x scrollbar-y height="-60" ref="scroller" use-pullup v-model="demo4Value" @on-pullup-loading="load4">
        <div class="box2">
          <div class="content">
            <ul>

              <li v-for="(item,index) in lists">

                <group>
                  <div @click="goDetail(item.book_id)" class="left-book"><img :src="item.cover" alt=""></div>
                  <div class="right-book">
                    <p @click="goDetail(item.book_id)" class="title">{{item.name}}</p>
                    <p @click="goDetail(item.book_id)">
                      <span class="author">{{item.author}}</span>
                      <span v-if='item.status==0' class="status1">待领取</span>
                      <span v-if='item.status==1' class="status1">已领取</span>
                      <span v-if='item.status==2' class="status1">待归还</span>
                      <!-- <span v-if='item.status=="0"' class="status">待审核</span>
                    <span v-if='item.status=="1"' class="status">代发货</span>
                    <span v-if='item.status=="2"' class="status">已送出</span>
                    <span v-if='item.status=="3"' class="status">已领取</span>
                    <span v-if='item.status=="4"' class="status">申请还书</span>
                    <span v-if='item.status=="5"' class="status">已归还</span> -->
                    </p>
                    <p class="content"></p>
                    <p class="buttons">
                      <x-button v-if='item.status==0' mini placeholder='请输入标题' max='' @click.native="unBorrow(item)" type="primary">取消</x-button>
                      <x-button v-if='item.status==1' mini placeholder='请输入标题' max='' @click.native="returnBook(item)" type="primary">还书</x-button>
                      <!-- <x-button v-if='item.status==1'  mini placeholder='请输入您的评论' max='20' @click.native="popComment(item)" type="primary">评论</x-button> -->
                    </p>
                  </div>
                </group>

                <div v-transfer-dom>
                  <popup v-model="isPop">
                    <div class="popup1">
                      <group>
                        <!-- <x-input title="评论标题" v-model="commentTitle"></x-input> -->
                        <x-textarea title="评论内容" v-model="commentContent"></x-textarea>
                        <div style="text-align:center;margin-bottom:10px">
                          <x-button mini @click.native="comment(item)" type="primary">提交评论</x-button>
                        </div>
                      </group>
                    </div>
                  </popup>
                </div>
              </li>

            </ul>
          </div>
        </div>
        <div v-if='!stop' slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 50px; bottom: -50px; text-align: center;">
          <span v-show="demo4Value.pullupStatus === 'default'"></span>
          <span class="pullup-arrow" v-show="demo4Value.pullupStatus === 'default' || demo4Value.pullupStatus === 'up' || demo4Value.pullupStatus === 'down'" :class="{'rotate': demo4Value.pullupStatus === 'down'}">↑</span>
          <span v-show="demo4Value.pullupStatus === 'loading'">
            <spinner type="ios-small"></spinner>
          </span>
        </div>
        <div v-if='stop' class="nomore">没有更多</div>
      </scroller>
    </div>
    <!-- 预定图书 -->
    <div v-if="sort=='resevation_books'">
      <scroller style="top:0px" lock-x scrollbar-y height="-60" ref="scroller" use-pullup v-model="demo4Value" @on-pullup-loading="load4">
        <div class="box2">
          <div class="content">
            <ul>
              <li v-for="(item,index) in lists">
                <group>
                  <div @click="goDetail(item.book_id)" class="left-book"><img :src="item.cover" alt=""></div>
                  <div class="right-book">
                    <p @click="goDetail(item.book_id)" class="title">{{item.name}}</p>
                    <p @click="goDetail(item.book_id)">
                      <span class="author">{{item.author}}</span>

                      <!-- <span v-if='item.status==0' class="status">待审核</span> 
                     <span v-if='item.status==1' class="status">批准采购</span> 
                     <span v-if='item.status==2' class="status">不与采购</span> 
                     <span v-if='item.status==3' class="status">在途中</span> 
                     <span v-if='item.status==4' class="status">已入库</span>  -->
                      <!-- <span v-if='item.status=="0"' class="status">待审核</span>
                    <span v-if='item.status=="1"' class="status">待发货</span>
                    <span v-if='item.status=="2"' class="status">已送出</span>
                    <span v-if='item.status=="3"' class="status">已领取</span>
                    <span v-if='item.status=="4"' class="status">申请还书</span>
                    <span v-if='item.status=="5"' class="status">已归还</span> -->
                    </p>
                    <p class="content"></p>
                    <p class="buttons">
                      <x-button mini @click.native='unResevation(item)' type="primary">取消</x-button>
                      <!-- <x-button v-if='item.status>="3"' mini placeholder='请输入标题' max='' @click.native="returnBook(item)" type="primary">还书</x-button>          -->
                      <!-- <x-button  mini placeholder='请输入您的评论' max='20' @click.native="popComment(item)" type="primary">评论</x-button> -->
                      <!-- <x-button mini type="primary">修改时间</x-button> -->
                    </p>
                  </div>
                </group>
              </li>
              <div v-if="lists.length==0" style="text-align:center;line-height:50vh">您暂时没有预借的图书</div>
            </ul>
          </div>
        </div>
        <div v-if='!stop' slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 50px; bottom: -50px; text-align: center;">
          <span v-show="demo4Value.pullupStatus === 'default'"></span>
          <span class="pullup-arrow" v-show="demo4Value.pullupStatus === 'default' || demo4Value.pullupStatus === 'up' || demo4Value.pullupStatus === 'down'" :class="{'rotate': demo4Value.pullupStatus === 'down'}">↑</span>
          <span v-show="demo4Value.pullupStatus === 'loading'">
            <spinner type="ios-small"></spinner>
          </span>
        </div>
        <div v-if='stop' class="nomore">没有更多</div>
      </scroller>
    </div>

    <!-- 历史借书 -->
    <div v-if="sort=='history_books'">
      <scroller style="top:0px" lock-x scrollbar-y height="-104" ref="scroller" use-pullup v-model="demo4Value" @on-pullup-loading="load4">
        <div class="box2">
          <div class="content">
            <ul>
              <li v-for="(item,index) in lists">
                <group>
                  
                  <div @click="goDetail(item.book_id)" class="left-book"><img :src="item.cover" alt=""></div>
                  <div class="right-book">
                    <p @click="goDetail(item.book_id)" class="title">{{item.name}}</p>
                    <p @click="goDetail(item.book_id)">
                      <span class="author">{{item.author}}</span>
                      <!--<span class="status">{{item.status}}</span>-->
                    </p>
                    <p class="content"></p>
                    <p class="buttons">
                      <x-button mini placeholder='请输入您的评论' max='20' @click.native="popComment(item)" type="primary">评论</x-button>
                      <!-- <x-button mini @click.native='deleteUncollect(item.id)' type="primary">取消收藏</x-button> -->
                    </p>
                  </div>
                </group>
                <div v-transfer-dom>
                  <popup v-model="isPop">
                    <div class="popup1">
                      <group>
                        <!-- <x-input title="评论标题" v-model="commentTitle"></x-input> -->
                        <x-textarea title="评论内容" v-model="commentContent"></x-textarea>
                        <div style="text-align:center;margin-bottom:10px">
                          <x-button mini @click.native="comment()" type="primary">提交评论</x-button>
                        </div>

                      </group>

                    </div>
                  </popup>
                </div>

              </li>
            </ul>
          </div>
        </div>
        <div v-if='!stop' slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 50px; bottom: -50px; text-align: center;">
          <span v-show="demo4Value.pullupStatus === 'default'"></span>
          <span class="pullup-arrow" v-show="demo4Value.pullupStatus === 'default' || demo4Value.pullupStatus === 'up' || demo4Value.pullupStatus === 'down'" :class="{'rotate': demo4Value.pullupStatus === 'down'}">↑</span>
          <span v-show="demo4Value.pullupStatus === 'loading'">
            <spinner type="ios-small"></spinner>
          </span>
        </div>
        <div v-if='stop' class="nomore">没有更多</div>
      </scroller>
    </div>

    <div v-if="sort=='collection_books'">
      <scroller style="top:0px" lock-x scrollbar-y height="-104" ref="scroller" use-pullup v-model="demo4Value" @on-pullup-loading="load4">
        <div class="box2">
          <div class="content">

            <ul>
              <li v-for="(item,index) in lists">
                <group>
                  <div @click="goDetail(item.id)" class="left-book"><img :src="item.cover" alt=""></div>
                  <div class="right-book">
                    <p @click="goDetail(item.id)" class="title">{{item.name}}</p>
                    <p @click="goDetail(item.id)">
                      <span class="author">{{item.author}}</span>
                      <!--<span class="status">{{item.status}}</span>-->
                    </p>
                    <p class="content"></p>
                    <p class="buttons">
                      <x-button mini @click.native='deleteUncollect(item.id)' type="primary">取消收藏</x-button>
                    </p>
                  </div>
                </group>
              </li>
            </ul>
          </div>
        </div>
        <div v-if='!stop' slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 50px; bottom: -50px; text-align: center;">
          <span v-show="demo4Value.pullupStatus === 'default'"></span>
          <span class="pullup-arrow" v-show="demo4Value.pullupStatus === 'default' || demo4Value.pullupStatus === 'up' || demo4Value.pullupStatus === 'down'" :class="{'rotate': demo4Value.pullupStatus === 'down'}">↑</span>
          <span v-show="demo4Value.pullupStatus === 'loading'">
            <spinner type="ios-small"></spinner>
          </span>
        </div>
        <div v-if='stop' class="nomore">没有更多</div>
      </scroller>
    </div>

    <div v-if="sort=='seeking_books'" id='seeking_books'>
      <group>
        <cell title="我找的书"></cell>
      </group>
      <!-- <scroller style="top:0px" lock-x scrollbar-y height="-104" ref="scroller" use-pullup v-model="demo4Value"
                @on-pullup-loading="load4"> -->
      <scroller style="top:0px" lock-x scrollbar-y height="-104" ref="scroller" v-model="demo4Value" @on-pullup-loading="load4">
        <div class="box2">
          <div class="content">
            <ul>
              <li v-for="(item,index) in lists">
                <group>
                  <!-- <div class="left-book"><img :src="item.img" alt=""></div> -->
                  <div class="right-book">
                    <p class="title">书名：{{item.name}}

                    </p>
                    <p>
                      <span class="author">作者：{{item.author}}
                        <!-- <span v-if='item.status==0' class="status">待审批</span>  -->
                        <!-- <span v-if='item.status==1' class="status">批准采购</span>  -->
                        <!-- <span v-if='item.status==2' class="status">不予采购</span>  -->
                        <span v-if='item.status<=3' class="status">采购中</span>
                        <span v-if='item.status==4' class="status">已入库</span>
                      </span>

                    </p>
                    <p v-if="!(item.press=='null')" class="content">出版社：{{item.press}}</p>
                    <p class="buttons">
                      <!-- <x-button mini type="primary">取消收藏</x-button> -->
                    </p>
                  </div>
                </group>
              </li>
            </ul>
          </div>
        </div>
        <!-- <div slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up"
             style="position: absolute; width: 100%; height: 50px; bottom: -50px; text-align: center;">
          <span v-show="demo4Value.pullupStatus === 'default'"></span>
          <span class="pullup-arrow"
                v-show="demo4Value.pullupStatus === 'default' || demo4Value.pullupStatus === 'up' || demo4Value.pullupStatus === 'down'"
                :class="{'rotate': demo4Value.pullupStatus === 'down'}">↑</span>
          <span v-show="demo4Value.pullupStatus === 'loading'"><spinner type="ios-small"></spinner></span>
        </div> -->
      </scroller>
    </div>


       <!--站点图书开始-->
    <div id='borrow_rank' v-if="sort=='sitebooklist'">
      <scroller style="top:0px" lock-x scrollbar-y height="-58" ref="scroller" use-pullup v-model="demo4Value" @on-pullup-loading="load4">
        <div class="box2">
          <div class="content">
            <ul>
              <li v-for="(item,index) in lists">
                <group>
                  <div @click="goDetail(item.id)" class="left-book"><img :src="item.cover" alt=""></div>
                  <div class="right-book">
                    <p @click="goDetail(item.id)" class="title">{{item.name}}</p>
                    <p @click="goDetail(item.id)">
                      <span class="author">{{item.author}}</span>
                      <!--<span class="status">{{item.status}}</span>-->
                    </p>
                    <p class="content">当前借阅
                      <span>{{item.borrow_count}}</span>次</p>
                    <p class="buttons">

                      <x-button v-if='item.inventory>0&&item.borrowed=="false"' @click.native="borrow(item.id)" mini type="primary">借阅</x-button>
                      <!-- <x-button v-if='item.inventory>0&&item.borrowed=="false"' @click.native="borrow(item.id)" mini type="primary">借阅</x-button> -->
                      <x-button v-if='item.inventory>0&&item.borrowed=="true"' :disabled='true' mini type="primary">已借阅</x-button>
                      <!-- <x-button  v-if='item.inventory<=0' @click.native="goDetail(item.id)" mini type="primary">预约</x-button> -->

                      <x-button v-if='item.inventory<=0' @click.native="reservation(item.id)" mini type="primary">预约</x-button>
                      <!-- <x-button v-if='item.inventory<0' :disabled='true'  mini type="primary">已预约</x-button> -->

                      <x-button v-if='item.collected=="false"' @click.native="collect($event,item.id)" mini type="primary">收藏</x-button>
                      <x-button v-if='item.collected=="true"' :disabled='true' mini type="primary">已收藏</x-button>
                      <!-- <x-button style="background:#d32f2f;color:white" @click.native="addCart(item)" mini type="primary" >放入借书篮</x-button> -->
                    </p>
                  </div>
                </group>
              </li>
            </ul>
          </div>
        </div>
        <div v-if='!stop' slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 50px; bottom: -50px; text-align: center;">
          <span v-show="demo4Value.pullupStatus === 'default'"></span>
          <span class="pullup-arrow" v-show="demo4Value.pullupStatus === 'default' || demo4Value.pullupStatus === 'up' || demo4Value.pullupStatus === 'down'" :class="{'rotate': demo4Value.pullupStatus === 'down'}">↑</span>
          <span v-show="demo4Value.pullupStatus === 'loading'">
            <spinner type="ios-small"></spinner>
          </span>
        </div>
        <div v-if='stop' class="nomore">没有更多</div>
      </scroller>
    </div>
    <!--站点图书结束-->

    <!--新书推荐开始-->
    <div id='borrow_rank' v-if="sort=='recommended_books'">
      <scroller style="top:0px" lock-x scrollbar-y height="-58" ref="scroller" use-pullup v-model="demo4Value" @on-pullup-loading="load4">
        <div class="box2">
          <div class="content">
            <!-- <group>
              <cell v-if="!!siteName" :title="siteName" link='./sitebooklist.html' is-link></cell>
            </group> -->

            <ul>
              <li v-for="(item,index) in lists">
                <group>
                  <div @click="goDetail(item.id)" class="left-book"><img :src="item.cover" alt=""></div>
                  <div class="right-book">
                    <p @click="goDetail(item.id)" class="title">{{item.name}}</p>
                    <p @click="goDetail(item.id)">
                      <span class="author">{{item.author}}</span>
                      <!--<span class="status">{{item.status}}</span>-->
                    </p>
                    <p class="content">当前借阅
                      <span>{{item.borrow_count}}</span>次</p>
                    <p class="buttons">

                      <x-button v-if='item.inventory>0&&item.borrowed=="false"' @click.native="borrow(item.id)" mini type="primary">借阅</x-button>
                      <!-- <x-button v-if='item.inventory>0&&item.borrowed=="false"' @click.native="borrow(item.id)" mini type="primary">借阅</x-button> -->
                      <x-button v-if='item.inventory>0&&item.borrowed=="true"' :disabled='true' mini type="primary">已借阅</x-button>
                      <!-- <x-button  v-if='item.inventory<=0' @click.native="goDetail(item.id)" mini type="primary">预约</x-button> -->

                      <x-button v-if='item.inventory<=0' @click.native="reservation(item.id)" mini type="primary">预约</x-button>
                      <!-- <x-button v-if='item.inventory<0' :disabled='true'  mini type="primary">已预约</x-button> -->

                      <x-button v-if='item.collected=="false"' @click.native="collect($event,item.id)" mini type="primary">收藏</x-button>
                      <x-button v-if='item.collected=="true"' :disabled='true' mini type="primary">已收藏</x-button>
                      <!-- <x-button style="background:#d32f2f;color:white" @click.native="addCart(item)" mini type="primary" >放入借书篮</x-button> -->
                    </p>
                  </div>
                </group>
              </li>
            </ul>
          </div>
        </div>
        <div v-if='!stop' slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 50px; bottom: -50px; text-align: center;">
          <span v-show="demo4Value.pullupStatus === 'default'"></span>
          <span class="pullup-arrow" v-show="demo4Value.pullupStatus === 'default' || demo4Value.pullupStatus === 'up' || demo4Value.pullupStatus === 'down'" :class="{'rotate': demo4Value.pullupStatus === 'down'}">↑</span>
          <span v-show="demo4Value.pullupStatus === 'loading'">
            <spinner type="ios-small"></spinner>
          </span>
        </div>
        <div v-if='stop' class="nomore">没有更多</div>
      </scroller>
    </div>
    <!--新书推荐结束-->

    <!--借阅排名开始-->
    <div id='borrow_rank' v-if="sort=='borrow_bank'">
      <scroller style="top:0px" lock-x scrollbar-y height="-58" ref="scroller" use-pullup v-model="demo4Value" @on-pullup-loading="load4">
        <div class="box2">
          <div class="content">
            <ul>
              <li v-for="(item,index) in lists">
                <group>
                  <div @click="goDetail(item.id)" class="left-book"><img :src="item.cover" alt=""></div>
                  <div class="right-book">
                    <p @click="goDetail(item.id)" class="title">{{item.name}}</p>
                    <p @click="goDetail(item.id)">
                      <span class="author">{{item.author}}</span>
                      <!--<span class="status">{{item.status}}</span>-->
                    </p>
                    <p class="content">当前借阅
                      <span>{{item.borrow_count}}</span>次</p>
                    <p class="buttons">
                      

                      <x-button v-if='item.inventory>0&&item.borrowed=="false"' @click.native="borrow(item.id)" mini type="primary">借阅</x-button>
                      <!-- <x-button v-if='item.inventory>0&&item.borrowed=="false"' @click.native="borrow(item.id)" mini type="primary">借阅</x-button> -->
                      <x-button v-if='item.inventory>0&&item.borrowed=="true"' :disabled='true' mini type="primary">已借阅</x-button>
                      <!-- <x-button  v-if='item.inventory<=0' @click.native="goDetail(item.id)" mini type="primary">预约</x-button> -->

                      <x-button v-if='item.inventory<=0' @click.native="reservation(item.id)" mini type="primary">预约</x-button>
                      <!-- <x-button v-if='item.inventory<0' :disabled='true'  mini type="primary">已预约</x-button> -->

                      <x-button v-if='item.collected=="false"' @click.native="collect($event,item.id)" mini type="primary">收藏</x-button>
                      <x-button v-if='item.collected=="true"' :disabled='true' mini type="primary">已收藏</x-button>
                      <!-- <x-button style="background:#d32f2f;color:white" @click.native="addCart(item)" mini type="primary" >放入借书篮</x-button> -->
                    </p>
                  </div>
                </group>
              </li>
            </ul>
          </div>
        </div>
        <div v-if='!stop' slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 50px; bottom: -50px; text-align: center;">
          <span v-show="demo4Value.pullupStatus === 'default'"></span>
          <span class="pullup-arrow" v-show="demo4Value.pullupStatus === 'default' || demo4Value.pullupStatus === 'up' || demo4Value.pullupStatus === 'down'" :class="{'rotate': demo4Value.pullupStatus === 'down'}">↑</span>
          <span v-show="demo4Value.pullupStatus === 'loading'">
            <spinner type="ios-small"></spinner>
          </span>
        </div>
        <div v-if='stop' class="nomore">没有更多</div>
      </scroller>
    </div>
    <!--借阅排名结束-->

    <div v-if='sort=="classlist"'>
      <scroller style="top:0px" lock-x scrollbar-y height="-58" ref="scroller" use-pullup v-model="demo4Value" @on-pullup-loading="load4">
        <div class="box2">
          <div class="content">
            <ul>
              <li v-for="(item,index) in lists">
                <group>
                  <div @click="goDetail(item.id)" class="left-book"><img :src="item.cover" alt=""></div>
                  <div class="right-book">
                    <p @click="goDetail(item.id)" class="title">{{item.name}}</p>
                    <p @click="goDetail(item.id)">
                      <span class="author">{{item.author}}</span>
                      <!--<span class="status">{{item.status}}</span>-->
                    </p>
                    <p class="content">当前借阅
                      <span>{{item.borrow_count}}</span>次</p>
                    <p class="buttons">
                      <x-button v-if='item.inventory>0&&item.borrowed=="false"' @click.native="borrow(item.id)" mini type="primary">借阅</x-button>
                      <x-button v-if='item.inventory>0&&item.borrowed=="true"' :disabled='true' mini type="primary">已借阅</x-button>
                      <x-button v-if='item.inventory<=0' @click.native="reservation(item.id)" mini type="primary">预约</x-button>
                      <x-button v-if='item.collected=="false"' @click.native="collect($event,item.id)" mini type="primary">收藏</x-button>
                      <x-button v-if='item.collected=="true"' :disabled='true' mini type="primary">已收藏</x-button>
                    </p>
                  </div>
                </group>
              </li>
            </ul>
          </div>
        </div>
        <div v-if='!stop' slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 50px; bottom: -50px; text-align: center;">
          <span v-show="demo4Value.pullupStatus === 'default'"></span>
          <span class="pullup-arrow" v-show="demo4Value.pullupStatus === 'default' || demo4Value.pullupStatus === 'up' || demo4Value.pullupStatus === 'down'" :class="{'rotate': demo4Value.pullupStatus === 'down'}">↑</span>
          <span v-show="demo4Value.pullupStatus === 'loading'">
            <spinner type="ios-small"></spinner>
          </span>
        </div>
        <div v-if='stop' class="nomore">没有更多</div>
      </scroller>
    </div>

    <div v-if='sort=="searchlist"'>
      <scroller style="top:0px" lock-x scrollbar-y height="-58" ref="scroller" v-model="demo4Value" @on-pullup-loading="load4">
        <div class="box2">
          <div class="content">
            <ul>
              <li v-for="(item,index) in lists">
                <group>
                  <div @click="goDetail(item.id)" class="left-book"><img :src="item.cover" alt=""></div>
                  <div class="right-book">
                    <p @click="goDetail(item.id)" class="title">{{item.name}}</p>
                    <p @click="goDetail(item.id)">
                      <span class="author">{{item.author}}</span>
                      <!--<span class="status">{{item.status}}</span>-->
                    </p>
                    <p class="content">当前借阅
                      <span>{{item.borrow_count}}</span>次</p>
                    <p class="buttons">
                      <x-button v-if='item.inventory>0&&item.borrowed=="false"' @click.native="borrow(item.id)" mini type="primary">借阅</x-button>
                      <x-button v-if='item.inventory>0&&item.borrowed=="true"' :disabled='true' mini type="primary">已借阅</x-button>
                      <x-button v-if='item.inventory<=0' @click.native="reservation(item.id)" mini type="primary">预约</x-button>
                      <x-button v-if='item.collected=="false"' @click.native="collect($event,item.id)" mini type="primary">收藏</x-button>
                      <x-button v-if='item.collected=="true"' :disabled='true' mini type="primary">已收藏</x-button>
                    </p>
                  </div>
                </group>
              </li>
            </ul>
          </div>
        </div>

      </scroller>
    </div>

  </div>

</template>

<script>
import vm from "./booklist.js";
export default vm;
</script>

